<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>仓储管理</el-breadcrumb-item>
				<el-breadcrumb-item>入库管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="warehousingManagement-body">
			<div class="body-header">
				<div style="margin-right: 10px">
					<span>入库状态: &nbsp;</span>
					<el-select placeholder="请选择入库状态" v-model="pageData.status" style="width: 200px" size="small">
						<el-option
								v-for="item in statusData"
								:key="item.id"
								:label="item.label"
								:value="item.id">
						</el-option>
					</el-select>
				</div>
				<div style="margin-right: 10px"><span>入库单号: &nbsp;</span> <el-input placeholder="请输入入库单号" v-model="pageData.warehouseNum" size="small" style="width: 200px;"></el-input></div>
				
				<div style="margin-right: 10px"><el-button type="info" icon="el-icon-search" size="small" @click="getPage">搜 索</el-button></div>
				<div style="margin-right: 10px"><el-button type="primary" icon="el-icon-plus" size="small" @click="addDialog = true">添 加</el-button></div>
			
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="warehouseNum"
							label="入库单号">
					</el-table-column>
					<el-table-column
							align="center"
							label="入库状态">
						<template slot-scope="scope">
							{{scope.row.status === 1? '未审核' :  scope.row.status === 2? '已审核' : '已入库'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="goodName"
							label="商品名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="goodCode"
							label="商品编码">
					</el-table-column>
					<el-table-column
							align="center"
							prop="attributeDesc"
							label="属性/规格">
					</el-table-column>
					<el-table-column
							align="center"
							prop="totalNum"
							label="数量">
					</el-table-column>
					
					<el-table-column
							align="center"
							prop="name"
							label="入库仓位">
						<template slot-scope="scope">
							{{scope.row.positions === 1? 'A1' : scope.row.positions === 2? 'A2' : scope.row.positions === 3? 'A3' : scope.row.positions === 4? 'A4' : scope.row.positions === 5? 'A5' : scope.row.positions === 6? 'A6' :scope.row.positions === 7? 'A7' : 'A8'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="入库类型">
						<template slot-scope="scope">
							{{scope.row.warehouseType === 1? '采购入库' :  '退货入库'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="receivingClerk"
							label="收货员">
					</el-table-column>
					<el-table-column
							align="center"
							show-overflow-tooltip
							prop="putStorageTime"
							label="入库时间">
					</el-table-column>
					<el-table-column
							align="center"
							width="350px"
							label="操作">
						<template slot-scope="scope">
							<el-button type="info" size="mini" @click="openEdit(scope.row.id)">编 辑</el-button>
							<el-button type="warning " size="mini" @click="audit(scope.row.id)">审 核</el-button>
							<el-button type="primary " size="mini" @click="putInStorage(scope.row.id)">确 认 入 库</el-button>
							<el-button type="danger " size="mini" @click="deleteOpen(scope.row.id)">删 除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
		
		<!--		新增的弹框-->
		<el-dialog
				title = "入库信息"
				:visible.sync = "addDialog"
				width = "40%"
				center
		>
			<div>
				<el-form  :inline="true"  label-width = "100px" >
					<el-form-item label="商品名称:" >
						<el-input  placeholder="请输入商品名称" v-model="addData.goodName" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="入库仓位:" prop="name">
						<el-select placeholder="请选择入库状态"  v-model="addData.positions" style="width: 200px" size="small">
							<el-option
									v-for="item in positionData"
									:key="item.id"
									:label="item.label"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品编码:" >
						<el-input  placeholder="请输入商品编码" v-model="addData.goodCode"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="入库类型:" >
						<el-select placeholder="请选择入库类型"  v-model="addData.warehouseType" style="width: 200px" size="small">
							<el-option
									v-for="item in typeData"
									:key="item.id"
									:label="item.label"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="属性/规格:" >
						<el-input  placeholder="请输入属性/规格" v-model="addData.attributeDesc" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="收货员:" >
						<el-input  placeholder="请输入收货员名称" v-model="addData.receivingClerk"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="数量:" >
						<el-input  placeholder="请输入数量" v-model="addData.totalNum" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="入库时间:">
						<el-date-picker v-model="addData.putStorageTime"  value-format="yyyy-MM-dd" type = "date" placeholder = "请选择入库时间" style="width: 200px;" ></el-date-picker >
					</el-form-item>
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click = "addDialog = false"  size="small">取 消</el-button >
				<el-button type = "primary" @click = "submitAdd"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
		<!--		编辑的弹框-->
		<el-dialog
				title = "入库信息"
				:visible.sync = "editDialog"
				width = "40%"
				center
		>
			<div>
				<el-form  :inline="true"  label-width = "100px" >
					<el-form-item label="商品名称:" >
						<el-input  placeholder="请输入商品名称" v-model="editData.goodName" style="width: 200px" ></el-input>
					</el-form-item>
					<el-form-item label="入库仓位:" prop="name">
						<el-select placeholder="请选择入库状态"  v-model="editData.positions" style="width: 200px" size="small">
							<el-option
									v-for="item in positionData"
									:key="item.id"
									:label="item.label"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品编码:" >
						<el-input  placeholder="请输入商品编码" v-model="editData.goodCode"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="入库类型:" >
						<el-select placeholder="请选择入库类型"  v-model="editData.warehouseType" style="width: 200px" size="small">
							<el-option
									v-for="item in typeData"
									:key="item.id"
									:label="item.label"
									:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="属性/规格:" >
						<el-input  placeholder="请输入属性/规格" v-model="editData.attributeDesc" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="收货员:" >
						<el-input  placeholder="请输入收货员名称" v-model="editData.receivingClerk"  style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="数量:" >
						<el-input  placeholder="请输入数量" v-model="editData.totalNum" style="width: 200px"  ></el-input>
					</el-form-item>
					<el-form-item label="入库时间:">
						<el-date-picker v-model="editData.putStorageTime"  value-format="yyyy-MM-dd" type="date" placeholder = "请选择入库时间" style="width: 200px;" ></el-date-picker >
					</el-form-item>
				</el-form >
			</div>
			<span slot = "footer" class = "dialog-footer" >
				<el-button @click="editDialog=false"  size="small">取 消</el-button >
				<el-button type="primary" @click="submitEdit"  size="small">确 定</el-button >
		  	</span >
		</el-dialog >
	</div>
</template >

<script >
    import {deliveryInBound, confirmBound, examineBound, deleteBound, deliveryAdd, detailsBound, deliveryEdit} from "../api/storageModules";

    export default {
        name: "warehousingManagement",
        data(){
            return{
                addDialog:false,
				editDialog:false,
                statusData:[
                    {
                        id: null,
                        label: '全部'
                    },
                    {
                        id: 1,
                        label: '未审核'
                    },
                    {
                        id: 2,
                        label: '已审核'
                    },
                    {
                        id: 3,
                        label: '已入库'
                    }
                ],
                positionData:[
                    {
                        id: 1,
                        label: 'A1'
                    },
                    {
                        id: 2,
                        label: 'A2'
                    },
                    {
                        id: 3,
                        label: 'A3'
                    },
                    {
                        id: 4,
                        label: 'A4'
                    },
                    {
                        id: 5,
                        label: 'A5'
                    },
                    {
                        id: 6,
                        label: 'A6'
                    },
                    {
                        id: 7,
                        label: 'A7'
                    },
                    {
                        id: 8,
                        label: 'A8'
                    },
				],
				typeData:[
                    {
                        id: 1,
                        label: '采购入库'
                    },
                    {
                        id: 2,
                        label: '退货入库'
                    },
				],
                pageData:{
                    pageIndex: 1,
                    pageSize: 10,
                    status: null,
                    warehouseNum: ''
				},
                tableData: [],
				total:null,
				addData:{
                    attributeDesc: '',
                    goodCode: '',
                    goodName: '',
                    positions: null,
                    putStorageTime: '',
                    receivingClerk: '',
                    totalNum: '',
                    warehouseType: null
                },
				editData:{}
            }
        },
		mounted() {
            this.getPage()
        },
        methods:{
			 //列表
			async getPage(){
                 const { data } = await deliveryInBound(this.pageData)
                 if (data.code === 200) {
                     this.tableData = data.data.data
                     this.total = data.data.total
                 }
			},
			//分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//确认入库
            putInStorage(id){
                this.$confirm('确定入库,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    confirmBound(id).then( data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            this.$message.success(data.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销入库!'
                    })
                })
            },
			//审核
            audit(id){
                this.$confirm('审核入库,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    examineBound(id).then( data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            this.$message.success(data.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销审核!'
                    })
                })
            },
			//删除
            deleteOpen(id){
                this.$confirm('此操作将永久删除该项,是否继续?', '删除', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    deleteBound(id).then( data => {
                        console.log(data)
                        if (data.data.code === 200) {
                            this.$message.success(data.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销删除!'
                    })
                })
            },
			//新增
            async submitAdd(){
                for (let key in this.addData) {
                    if(!this.addData[key]){
                        return this.$message.error('请将信息填写完整')
                    }
                }
                const { data } = await deliveryAdd(this.addData)
				if (data.code === 200) {
				    this.$message.success(data.message)
					this.addDialog = false
					this.addData = {}
					await this.getPage()
				}
			},
			//	获取编辑数据
            async openEdit(id){
			    const { data } = await detailsBound(id)
				if (data.code === 200) {
				    this.editDialog = true
					this.editData = data.data
				}
			},
			//编辑
            async submitEdit(){
                for (let key in this.editData) {
                    if(!this.editData[key]){
                        return this.$message.error('请将信息填写完整')
                    }
                }
                const { data } = await deliveryEdit(this.editData)
                if (data.code === 200) {
                    this.$message.success(data.message)
                    this.editDialog = false
                    await this.getPage()
                }
			}
		}
    }
</script >

<style scoped lang="less">
	.warehousingManagement-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			margin-bottom: 20px;
			align-items: center;
			justify-content: flex-end;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			margin-top: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
